<template>
  <div>
    <!-- 顶部搜索框 -->
    <el-card>
      <el-row type="flex" justify="space-between" align='middle'>
        <el-form-item label="关键字">
          <el-input v-model.trim="form.keyword" placeholder="根据编号搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onClear">清除</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-row>
    </el-card>

    <!-- 数据显示框 -->
    <el-alert type="info" show-icon :closable="false">
      <template #title>
        数据一共{{page.total}}条
      </template>
    </el-alert>
    <!-- 页面数据显示框 -->
    <el-table :data="list" style="width: 100%" max-height='1500'>
      <el-table-column label="编号" width="220" prop="id">

      </el-table-column>
      <el-table-column label="题型" width="80" prop="questionType">
        <template v-slot="{row}">
          {{$filters.formatQuestionType(row.questionType)}}
        </template>
      </el-table-column>

      <!-- 题目编号 -->
      <el-table-column label="题目编号" width="190">
        <template #default="{row}">
          <div class="questionIDs">
            <el-button text v-for="button in row.questionIDs" :key="button.id" type="primary" class="button"
              @click="dialogVisibleS(button);dialogVisible = true">
              {{button.number}}
            </el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="录入时间" width="180" prop="addTime">
      </el-table-column>
      <el-table-column label="答题时间(s)" prop="totalSeconds">
      </el-table-column>
      <el-table-column label="正确率(%)" prop="accuracyRate">
      </el-table-column>
      <el-table-column label="录入人" prop="userName">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-icon :size="size" :color="color">
            <Delete />
          </el-icon>
          <el-button type="danger" :icon="Delete" circle plain @click="onDelItem(row.id)"></el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination v-model:currentPage="page.page" v-model:page-size="page.pagesize" :page-sizes="[5, 10, 20, 50]"
        layout="prev, pager, next, sizes, jumper" :total="page.total" @size-change="handleSizeChange"
        @current-change="onCurrentChange" />
    </el-row>

    <!-- 弹出层 -->
    <el-dialog v-model="dialogVisible" title="题目预览" width="80%" :before-close="handleClose" align-center>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
          【题型】：<span>{{$filters.formatQuestionType(dialogForm.questionType)}}</span>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" /><span>【编号】：{{dialogForm.id}}</span>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
          【难度】：<span>{{$filters.questionTypeFilters(dialogForm.difficulty)}}</span>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />【标签】：<span>
            {{dialogForm.tags}}
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" > 【学科】：<span>
            <!-- {{subList.find(item => item.id == dialogForm.subjectID ).label}} -->
            <!-- {{dialogForm.subjectID}} -->

          </span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" ><span>【目录】：
            <!-- {{dialogForm.catalogID}} -->

          </span>
        </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" /><span>【方向】：{{dialogForm.direction}}</span>
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="1">
        <el-col :span="20">
          <div class="grid-content ep-bg-purple">【题干】：</div>
          <div v-html="dialogForm.question" style="color:skyblue;"></div>

          <el-row type="flex" justify="start">
            <el-col :span="24">{{$filters.formatQuestionType(dialogForm.questionType)}}题 选项：（以下选中的选项为正确答案）</el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start">
        <el-radio-group v-model="chiose" disabled>
          <el-row v-for="item in dialogForm.options" :key="item.id">
            <el-radio :label="item.isRight" size="large">{{item.code }}{{item.title}}
            </el-radio>
          </el-row>
        </el-radio-group>
      </el-row>

      <el-divider />
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />【参考答案】：
          <el-button type="danger" @click="showView">视频答案预览</el-button>
        </el-col>
        <video :src="dialogForm.videoURL" controls :width="400" v-if="viewVideo" style="padding:15px"></video>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />【答案解析】:
          <div v-html="dialogForm.answerID"></div>
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />【题目备注】:
          <div v-html="dialogForm.remarks"></div>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { randoms as getCompanyList, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { Delete } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import filters from '@/filters/index.js'
import { list as subjectList } from '@/api/hmmm/subjects'
export default {
  name: 'questionsCheck',
  components: {},
  setup () {
    const chiose = ref(1)
    const subList = ref([])
    async function getSubjectList () {
      const res = await subjectList({ page: 1, pagesize: 10000 })
      console.log(res)
      subList.value = res.data.items
    }
    const dialogVisible = ref(false)// 弹出框显示隐藏
    const form = reactive({
      keyword: undefined
      //    id: undefined
    })
    const page = reactive({
      page: 1,
      pagesize: 8

    })
    const dialogForm = reactive({})
    const list = ref([])
    //
    // 清除
    function onClear () {
      form.keyword = undefined
      randoms()
    }

    function onCurrentChange (val) {
      console.log(val)
      page.page = val
      randoms()
    }
    const randoms = async () => {
      const { data: { counts, items } } = await getCompanyList({
        ...form,
        ...page
      })
      page.total = counts
      console.log(counts, items)
      list.value = items
    }
    onMounted(() => {
      randoms()
      getSubjectList()
    })
    // 删除
    function onDelItem (id) {
      console.log(id)

      ElMessageBox.confirm('此操作将永久删除该题组，是否继续？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRandoms({ id }).then(() => {
          ElMessage.success('删除成功')
          // getCompanyList()
          randoms()
        })
      }).catch(() => {

      })
    }
    // 查询
    function onSearch () {
      console.log(form.keyword)
      randoms()
    }
    // 弹出框数据
    async function dialogVisibleS (row) {
      console.log(row)
      const { data } = await detail(row)
      console.log(data)
      Object.assign(dialogForm, data)
      console.log(dialogForm)
    }
    // 视频
    const viewVideo = ref(false)
    function showView () {
      console.log(123)
      viewVideo.value = true
    }
    //

    return { page, list, form, Delete, onClear, onSearch, onCurrentChange, randoms, onDelItem, dialogVisible, dialogVisibleS, dialogForm, showView, filters, getSubjectList, subList, viewVideo, chiose }
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 20px;
}
</style>
